<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Temu跨境电商平台系统设计 - 用例图展示</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .slide-container {
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        overflow: hidden;
        font-family: "Noto Sans SC", sans-serif;
        animation: slideInRight 0.8s ease-out forwards;
      }

      /* 左侧图片区域 */
      .image-section {
        width: 50%;
        height: 100%;
        background-color: #2a3f8a; /* 使用主色调作为背景 */
        position: relative;
        overflow: hidden;
      }

      .image-section img,
      .image-section .shape-content {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 2;
      }

      /* 创建三维形状 */
      .shape-container {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 3;
      }

      .shape-content {
        width: 60%;
        height: 60%;
        position: relative;
        transform-style: preserve-3d;
        animation: float 6s ease-in-out infinite;
      }

      .shape-ring {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 30px solid rgb(251, 119, 1); /* 使用强调色 */
        border-radius: 50%;
        transform-style: preserve-3d;
        animation: rotate3D 20s linear infinite;
        box-shadow: 0 0 20px rgba(251, 119, 1, 0.4);
      }

      .decorative-ball {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: rgb(251, 119, 1); /* 使用强调色 */
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(251, 119, 1, 0.6);
      }

      .ball1 {
        bottom: 15%;
        left: 15%;
        animation: float 4s ease-in-out infinite;
      }
      .ball2 {
        bottom: 15%;
        right: 15%;
        animation: float 4s ease-in-out infinite 1s;
      }

      .decorative-column {
        position: absolute;
        width: 40px;
        height: 55%;
        background: linear-gradient(
          to top,
          #2a3f8a,
          rgb(251, 119, 1)
        ); /* 使用主色调到强调色的渐变 */
        left: 25%;
        bottom: 0;
        border-radius: 20px 20px 0 0;
        transform: rotate(-5deg);
        z-index: 1;
      }

      /* 右侧文字区域 */
      .content-section {
        width: 50%;
        height: 100%;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding-left: 10%;
      }

      .chapter-number {
        font-size: 7rem;
        font-weight: 700;
        color: rgb(251, 119, 1); /* 使用强调色 */
        line-height: 1;
        opacity: 0;
        animation: fadeIn 0.8s ease-out forwards 0.3s;
      }

      .chapter-title {
        font-size: 3.5rem;
        font-weight: 700;
        color: #2a3f8a; /* 使用主色调 */
        margin-top: 20px;
        position: relative;
        opacity: 0;
        animation: slideInRight 0.8s ease-out forwards 0.6s;
      }

      .chapter-title::after {
        content: "";
        position: absolute;
        bottom: -15px;
        left: 0;
        width: 0;
        height: 6px;
        background-color: rgb(251, 119, 1); /* 使用强调色 */
        animation: growWidth 1s ease-out forwards 1s;
      }

      .logo-container {
        position: absolute;
        top: 30px;
        right: 30px;
        z-index: 10;
        animation: fadeIn 1.2s ease-out;
      }

      .page-number {
        position: absolute;
        bottom: 30px;
        right: 30px;
        font-size: 1rem;
        color: #2a3f8a; /* 使用主色调 */
        opacity: 0.7;
        z-index: 10;
      }

      /* 动画 */
      @keyframes slideInRight {
        from {
          transform: translateX(50px);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @keyframes growWidth {
        from {
          width: 0;
        }
        to {
          width: 100px;
        }
      }

      @keyframes float {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-20px);
        }
        100% {
          transform: translateY(0);
        }
      }

      @keyframes rotate3D {
        0% {
          transform: rotateY(0deg) rotateX(20deg);
        }
        100% {
          transform: rotateY(360deg) rotateX(20deg);
        }
      }

      /* 页面切换动画 */
      .slide-out {
        animation: slideOutLeft 0.8s ease-out forwards;
      }

      @keyframes slideOutLeft {
        from {
          transform: translateX(0);
          opacity: 1;
        }
        to {
          transform: translateX(-100%);
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="slide-container">
      <!-- 左侧图片区域 -->
      <div class="image-section">
        <!-- 装饰柱体 -->
        <div class="decorative-column"></div>

        <!-- 3D形状容器 -->
        <div class="shape-container">
          <div class="shape-content">
            <div class="shape-ring"></div>
          </div>
        </div>

        <!-- 装饰球体 -->
        <div class="decorative-ball ball1"></div>
        <div class="decorative-ball ball2"></div>
      </div>

      <!-- 右侧文字区域 -->
      <div class="content-section">
        <div class="chapter-number">05</div>
        <div class="chapter-title">用例图展示</div>
      </div>

      <!-- Logo -->
      <div class="logo-container">
        <img
          src="images/temu_logo.svg"
          alt="Temu Logo"
          width="100"
          height="30"
        />
      </div>

      <!-- 页码 -->
      <div class="page-number">23 / 25</div>
    </div>
  </body>
</html>
